<template>
  <div>
    <el-form :inline="true" :model="formInline" class="demo-form-inline">
      <el-form-item label="学生姓名">
        <el-input v-model="formInline.studentname" placeholder="请输入学生名称" />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="onSubmit">搜索</el-button>
        <el-button type="primary" @click="add">新增</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="tableData" stripe border style="width: 100%;margin-bottom: 10px">
      <el-table-column prop="id" label="编号" width="180"/>
      <el-table-column prop="studentname" label="学生姓名" width="180"/>
      <el-table-column prop="gender" label="性别"/>
      <el-table-column prop="age" label="年龄"/>
      <el-table-column prop="address" label="家庭地址"/>
      <el-table-column label="操作" width="150">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handLeEdit(scope.row)">编辑</el-button>
          <el-button type="success" size="small" @click="handleDelete(scope.row.id)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
        layout="total,prev, pager, next"
        :total="total"
        :current-page="pageNum"
        :page-count="pages"
        @current-change="handleCurrentChange"
    />
    <el-dialog
        v-model="dialogVisible"
        title="学生信息"
        width="30%"
        :destroy-on-close="true"
    >
      <el-form
          ref="ruleFormRef"
          :model="ruleForm"
          :rules="rules"
          label-width="120px"
          class="demo-ruleForm"
          status-icon
      >
        <el-form-item label="学生姓名" prop="studentname">
          <el-input v-model="ruleForm.studentname" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男" />
            <el-radio label="女" />
          </el-radio-group>
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="ruleForm.age" />
        </el-form-item>
        <el-form-item label="家庭住址" prop="address">
          <el-input type="textarea" v-model="ruleForm.address" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary"  @click="dialogVisible=false">取消</el-button>
          <el-button type="primary"  @click="savaOrUpd">确认</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>
<script>
import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";
import axios from "axios";
import {ElMessage, ElMessageBox} from "element-plus";

export default {
  name: "StuView",
  setup(){
    // eslint-disable-next-line no-unused-vars
    const {proxy} = getCurrentInstance()    //定义getCurrentInstance方法声明this
    const data=reactive({
      dialogVisible:false,
      formInline:{
        studentname: ''
      },
      ruleForm:{
        studentname:'',
        gender:'',
        age:'',
        address:'',
      },
      rules:{
        studentname:[
          {required: true,message:'请输入活动名称',trigger:'blur'}
        ],
        gender:[
          { required: true, message: '请选择性别', trigger: 'blur' },
        ],
        address:[
          { required: true, message: '请输入家庭地址', trigger: 'blur' },
        ],
        age:[
          { required: true, message: '请输入年龄', trigger: 'blur' },
          {pattern:/^(1[8-9]|[2-9]\d)$/,message: '请输入18-19的数字',trigger: 'blur'}
        ]
      },
      tableData:[],
      total: 0,
      pages: 0,
      pageNum: 1,
    })
    onMounted(function (){
      getPage()
    })
    const handleDelete = (id) => {
      ElMessageBox.confirm(
          '你确定要删除该记录吗?',
          '警告',
          {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }
      )
          .then(() => {
            axios({
              method : 'delete',
              url: '/api/students/'+id
              // eslint-disable-next-line no-unused-vars
            }).then(function (result){
              if(result.data.code=='2000'){
                ElMessage.success("删除成功")
                getPage()
              }else {
                ElMessage.error("删除失败")
              }
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '删除取消',
            })
          })
    }

    const handLeEdit = (row) => {
      data.dialogVisible=true
      data.ruleForm=row
    }

    const savaOrUpd = () => {
      proxy.$refs['ruleFormRef'].validate((valid) => {
        if (valid) {
          axios({
            method: 'post',
            url: '/api/students',
            data: data.ruleForm
          }).then(function (result){
            if(result.data.code=='2000'){
              ElMessage.success("操作成功")
              data.dialogVisible=false
              getPage()
            }else {
              ElMessage.error("操作失败")
            }
          })
        } else {
          ElMessage.error("请填写信息")
          return false;
        }
      });
    }

    const handleCurrentChange = (pageNum) => {
      data.pageNum=pageNum
      getPage()
    }
    const add = () => {
      data.ruleForm= {
        studentname:'',
        gender:'',
        age:'',
        address:'',
      }
      data.dialogVisible=true
    }

    const onSubmit = () => {
      data.pageNum=1
      getPage()
    }
    const getPage = () => {
      axios({
        method: 'get',
        url: '/api/students?studentname=' + data.formInline.studentname + "&pageNum=" + data.pageNum
        // eslint-disable-next-line no-unused-vars
      }).then(function (result){
        data.tableData=result.data.data.records
        data.pages=result.data.data.pages
        data.total=result.data.data.total
        data.pageNum=result.data.data.current
      })
    }
    return{
      ...toRefs(data),
      getPage,
      onSubmit,
      add,
      handleCurrentChange,
      savaOrUpd,
      handLeEdit,
      handleDelete
    }
  }
}
</script>
<style scoped>

</style>